<style>
    .select_generator_page {
        height: 100%;
        overflow: hidden;
    }

    .select_generator_page .layui-card {
        max-width: 600px;
        margin: 0px auto;
        border-radius: 0;
    }

    .select_generator_page .layui-card-body {
        padding: 0px;
        border: 0;
    }

    .select_generator_page .layui-table-main {
        background-color: #ffffff;
    }

    .select_generator_page .layui-card:first-child {
        margin-top: 20px;
        border-bottom: 1px solid #e6e6e6;
    }

    .select_generator_page .layui-card:first-child .layui-input-block {
        margin-left: 0px;
        text-align: center;
        color: #009688;
        line-height: 43px;
    }

    .select_generator_page .layui-card:first-child .layui-form-item {
        margin-left: 0px;
        margin-bottom: 0px;
        text-align: center;
        color: #009688;
    }

    .select_generator_page .layui-card:first-child .layui-form-radio {
        margin-top: 0px;
    }

    .select_generator_page .layui-card:last-child {
        margin-bottom: 20px;
        height: calc(100% - 92px);
        background: unset;
    }

    .select_generator_page .layui-card:last-child .layui-card-header {
        color: #adadad;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        border-bottom: 1px solid #e6e6e6;
        background: white;
    }

    .select_generator_page .layui-card:last-child .layui-table-header {
        display: none;
    }

    .select_generator_page .layui-card:last-child .layui-card-body {
        height: calc(100% - 25px);
        box-sizing: border-box;
        overflow: auto;
    }

    .select_generator_page .layui-card:last-child .layui-table-view {
        border-width: 0 0 1px 0;
    }
</style>
<form class="layui-form" lay-filter="create_new_generator_form">
<div class="select_generator_page">
    <div class="layui-card">
        <div class="layui-card-body">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="radio" name="generator_id" value="new" #((generatorId == 'new' || isBlank(generatorId))?'checked':'') required lay-verify="required" title="创建新代码生成器">
                    </div>
                </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">最近创建</div>
        <div class="layui-card-body">
            <table id="recently_create_generator" lay-filter="recently_create_generator"></table>
            <script type="text/html" id="generator_radio_templet">
                <input type="radio" name="generator_id" value="{{d.generator_id?d.generator_id:''}}"  {{d.generator_id == '#(generatorId)'?'checked':''}} required lay-verify="required" class="layui-input">
            </script>
        </div>
    </div>
</div>
</form>

<script>
    layui.use(['table', 'form', 'xStep', 'jquery'], function () {
        var $ = layui.$;
        var form = layui.form;
        var table = layui.table;
        form.render("radio", "create_new_generator_form");
        //加载最近创建生成器列表
        table.render({
            elem: '#recently_create_generator'
            , url: '/generator/code/list?template_id=#(detail.template_id)&limit=999' //数据接口
            , page: false //开启分页
            , header: false
            , cols: [[ //表头
                {field: 'generator_id', width: 80, templet: "#generator_radio_templet"},
                {field: 'generator_name', title: '生成器名称'},
                {field: 'create_datetime', title: '创建时间', width: 200},
            ]],
        });
        //监听行单击事件
        table.on('row(recently_create_generator)', function (obj) {
            console.log(obj.tr) //得到当前行元素对象
            // console.log(obj.data) //得到当前行数据
            //obj.del(); //删除当前行
            //obj.update(fields) //修改当前行数据
        });
    });
</script>